{include file="common/_header"}
{include file="common/_header1"}

<body class="layui-anim layui-anim-up">
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">商铺管理</a>
            <a>
                <cite>{$data.title}</cite>
            </a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
            href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon" style="line-height:30px">ဂ</i></a>
        <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>
        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script> -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    </div>

    <div class="x-body">
        <xblock>
            <button class="layui-btn" onclick="x_admin_show('添加座位号','/Shops/editShopSeat?seat_id=0',400,400)">
                <i class="layui-icon"></i> 添 加
            </button>
            <button class="layui-btn" onclick="onDownloadAll()">
                批量导出
            </button>
            <button class="layui-btn" onclick="onGoQrBG()">
                二维码模板
            </button>
        </xblock>
        <table id="tables" class="layui-table">
            <thead>
                <tr>
                    <th>座位号</th>
                    <th>二维码</th>
                    <!--            <th>座位最大人数</th>-->
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {volist name="data.list" id="vo"}
                <tr class="table_tr">
                    <td>{$vo.seat_num}</td>
                    <!--            <td>{$vo.people_num}</td>-->
                    <td>
                        <div id="qrcode_{$vo.seat_id}"></div>
                        <canvas id="canvas_{$vo.seat_id}" style="width: 200px;"></canvas>
                        <img src="" alt="" class="canvas_{$vo.seat_id}">
                        <script type="text/javascript">
                            //二维码宽高

                            // //logo宽高
                            // var logowidth = 100;
                            // var logoheight = 100;
                            // //文字描述位置
                            // var textleft = qrcodewidth / 2;
                            // var texttop = qrcodeheight + 70;
                            // //logo位置
                            // var logoleft = (qrcodewidth - logowidth) / 2;
                            // var logotop = (qrcodeheight - logoheight) / 2;
                            var qrcode = new QRCode(
                                document.getElementById("qrcode_{$vo.seat_id}"), {
                                text: "http://shaxianoffline.ganmiaoedu.com/view?seat_id={$vo.seat_id}&shop_id={$vo.shop_id}",
                                width: 600,
                                height: 600
                            });
                            // console.log(qrcode._oDrawing._elCanvas.toDataURL('image/png'))

                            var seatName = "{$vo.seat_num}"
                            var canvas = document.getElementById('canvas_{$vo.seat_id}');

                            // 背景
                            var imgbg = new Image();
                            imgbg.src = '/static/qrcodebg.jpg'
                            // img.src = canvas.toDataURL('image/png');
                            // 二维码
                            var codeImg = new Image()
                            codeImg.src = qrcode._oDrawing._elCanvas.toDataURL('image/png')
                            // var imgCode = new Image()
                            // imgCode.src = codeImg.src
                            // console.log(qrCodeImage, imgCode, imgbg);
                            // console.log(imgbg, codeImg);
                            console.log(seatName, canvas, qrcode);
                            // imgbg.onload = function () {
                            //     codeImg.onload = function () {
                            //         canvas.width = canvaswidth;
                            //         canvas.height = canvasheight;

                            //         let ctx = canvas.getContext('2d');
                            //         //设置画布背景
                            //         ctx.fillStyle = '#ffff00';
                            //         ctx.fillRect(0, 0, canvas.width, canvas.height);

                            //         // 背景
                            //         ctx.drawImage(imgbg, 0, 0, canvas.width, canvas.height);
                            //         //绘制二维码

                            //         // ctx.drawImage(codeImg, 499, 733, 423, 426, 0, 0, 200, 200);
                            //         ctx.drawImage(codeImg, 499, 733, 423, 426);

                            //         //设置文字样式
                            //         ctx.fillStyle = '#f2c179';
                            //         ctx.font = 'bold ' + 100 + 'px Arial';
                            //         ctx.textAlign = 'center';
                            //         //文字描述
                            //         ctx.fillText(`${seatName}号桌`, 1417 / 2 + 15, 1360);
                            //         //设置logo
                            //         // var logo = new Image(logowidth, logoheight);
                            //         // logo.src = 'assets/img/hui.jpg';
                            //         // logo.onload = function () {
                            //         //     ctx.drawImage(logo, logoleft, logotop, logowidth, logoheight);
                            //         // }

                            //         console.log(ctx.canvas);
                            //         $(".canvas_{$vo.seat_id}").attr("src", ctx.canvas.toDataURL('image/png'));
                            //     }
                            // }

                        </script>
                    </td>
                    <td>
                        <ul class="nav navbar-nav" style=" height: 30px; line-height: 10px;">
                            <li class="dropdown" style="height: 100%;">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                    style=" height: 100%; line-height: 5px;">
                                    操作
                                    <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a title="修改"
                                            onclick="x_admin_show('修改', 'editShopSeat?seat_id={$vo.seat_id}', 400,400)"
                                            href="javascript:;">修改</a></li>
                                    <li><a title="删除" onclick="upgrade('{$vo.seat_id}')" href="javascript:;">删除</a></li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                </tr>
                {/volist}
            </tbody>
        </table>
        <div class="page_all">
            {$page|raw}
        </div>
    </div>
    <script>
        jQuery(function () {
            $('body').append(`<div id="loading" style="display:none;position:fixed;z-index:20202001;
            top:0;left:0;height:100%;width:100%;background: rgba(0,0,0,0.2) url(\'/static/admin/images/loading.gif\') no-repeat fixed center;"></div>`);
        })
        const zip = new JSZip()
        // const img = zip.folder(`二维码`);
        const qrcodeBgPath = '/static/qrcode/newqrcodebg.jpg'
        var qrcodewidth = 474;
        var qrcodeheight = 474;
        var qrcodeX = 354;
        var qrcodeY = 516;
        //canvas宽高
        var canvaswidth = 1181;
        var canvasheight = 1772;
        function onDownloadAll() {
            $('#loading').show();
            let data = []
            '{volist name="data.list" id="vo"}'
            data.push({
                seat_id: "{$vo.seat_id}",
                shop_id: "{$vo.shop_id}",
                seat_num: "{$vo.seat_num}"
            })
            '{/volist}'

            // 背景
            var imgbg = new Image();
            imgbg.src = qrcodeBgPath
            // 二维码
            // var codeImg = new Image()
            // codeImg.src = qrcode._oDrawing._elCanvas.toDataURL('image/png')
            console.log(seatName, canvas, qrcode);
            let promises = []
            imgbg.onload = function () {
                data.forEach(item => {
                    let qrCodeImg = document.getElementById(`qrcode_${item.seat_id}`).getElementsByTagName('img')[0]
                    let url = qrCodeImg.src
                    let name = item.seat_num

                    var canvas = document.createElement('canvas')
                    // codeImg.onload = function () {
                    canvas.width = canvaswidth;
                    canvas.height = canvasheight;

                    let ctx = canvas.getContext('2d');
                    //设置画布背景
                    ctx.fillStyle = '#ffff00';
                    ctx.fillRect(0, 0, canvas.width, canvas.height);

                    // 背景
                    ctx.drawImage(imgbg, 0, 0, canvas.width, canvas.height);
                    //绘制二维码
                    // ctx.drawImage(codeImg, 499, 733, 423, 426, 0, 0, 200, 200);
                    ctx.drawImage(qrCodeImg, qrcodeX, qrcodeY, qrcodewidth, qrcodeheight);

                    //设置文字样式
                    ctx.fillStyle = '#f2c179';
                    ctx.font = 'bold ' + 100 + 'px Arial';
                    ctx.textAlign = 'center';
                    //文字描述
                    ctx.fillText(`${name}`, canvaswidth / 2 + 15, 1073+80);
                    // console.log("canvas 绘制图片链接：", ctx.canvas.toDataURL('image/png'));
                    // canvas.toBlob(function (blob) {
                    //     console.log('新的', blob);
                    //     img.file(`${name}.png`, blob);
                    // })

                    promises.push(addToZip(canvas, zip, `${name}.png`))
                    let base64Data = ctx.canvas.toDataURL('image/png')
                })
                Promise.all(promises).then(res => {
                    createZip()
                })

            }
        }
        function onGoQrBG() {
            let a = document.createElement('a')
            a.href = qrcodeBgPath
            a.target = '_blank'
            console.log(a);
            a.click()
            // window.location.href = qrcodeBgPath
        }
        // 生成zip文件并下载到本地
        function createZip() {
            zip.generateAsync({ type: "blob" }).then((content) => {
                //  FileSaver.js  功能
                $('#loading').hide();
                saveAs(content, `座位号二维码.zip`);
            });
        }
        // canvas.toBlob是异步的，所以用Promise来保证操作执行完才进行接下来的操作
        function addToZip(canvas, zip, name) {
            return new Promise((resolve, reject) => {
                canvas.toBlob(function (blob) {
                    zip.file(name, blob);  // 将每次不同的canvas数据添加到zip文件中
                    resolve();
                });
            })
        }
        /*删除*/
        function upgrade(id) {
            layer.confirm('您确定要删除吗?', { btn: ['确定', '取消'], title: "提示" }, function () {
                $.ajax({
                    url: 'delShopSeat',
                    data: {
                        'seat_id': id,
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        layer.msg(data.msg, {
                            icon: 6,
                            time: 500,
                        }, function () {
                            window.location.reload();
                        })
                    }
                })
            });
        }

        $(function () {
            // 表格选中行的同时选中单选框
            $("#tables tr:gt(0)").click(function () {
                $(this).find(":radio").prop("checked", true);
            });

        });

        //js放到table下，才能检测到tr数组
        var trs = document.getElementById("tables").getElementsByTagName("tr");
        $(function () {
            for (var i = 0; i < trs.length; i++) {
                trs[i].onmousedown = function () {
                    mousedownclick(this);
                }
            }
        });

        function mousedownclick(obj) {
            for (var j = 0; j < trs.length; j++) {
                if (trs[j] == obj) {
                    if (trs[0] != obj) {
                        trs[j].style.background = '#D0E9C6';
                        // 启用新增和编辑按钮
                        $("#edits").removeAttr("disabled");//启用按钮
                        $('#edits').removeClass('layui-disabled');
                    }
                } else {
                    trs[j].style.background = '';
                }
            }
        }
    </script>
</body>

{include file="common/_bottom"}